<!-- 按键 -->
<template>
  <div class="key-cell" @click="handlerClickKeyCell">
    <div class="cnt">{{ btnVal }}</div>
  </div>
</template>
<script setup lang="ts">
import { useBaseStore } from '../stores/base.ts'
import { computed } from 'vue'

const baseStore = useBaseStore()
const props = defineProps({
  itemData: {
    type: String,
    defulet: '',
  },
})
const emits = defineEmits(['clickKeyCell'])
const handlerClickKeyCell = () => {
  emits('clickKeyCell', btnVal.value)
}
const btnVal = computed(() => {
  if (baseStore.caps) {
    return props.itemData?.toUpperCase()
  } else {
    return props.itemData?.toLowerCase()
  }
})
</script>
<style lang="scss" scoped>
.key-cell {
  font-family: 'Times New Roman', Times, serif;
  font-size: 0.5rem;
  flex: 1;
  position: relative;
  margin: 0.05rem;

  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 0.9rem;
  }

  .cnt {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.017543859649122806rem solid #000;
    border-radius: 0.07017543859649122rem;
    box-sizing: border-box;

    body.shade & {
      border-color: #fff;
    }
  }
}
</style>
